<template>
  <div class="dashboard">
    <div ref="divRef" class="divRef">
      <el-row :gutter="10">
        <el-col
          :span="6"
          v-for="item in categoryGoodsAmount"
          :key="item.number1"
        >
          <goods-count-card
            :title="item.title"
            :count="item.number1"
          ></goods-count-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="7">
          <hy-card title="分类商品数量图">
            <pie-echart :pieData="categoryGoodsCount"></pie-echart>
          </hy-card>
        </el-col>
        <el-col :span="10">
          <hy-card title="不同城市商品销量">
            <map-echart :mapData="addressGoodsSale"></map-echart>
          </hy-card>
        </el-col>
        <el-col :span="7">
          <hy-card title="分类商品数量（玫瑰图）">
            <rose-echart :pieData="categoryGoodsCount"></rose-echart>
          </hy-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="conten-row">
        <el-col :span="12">
          <hy-card title="分类商品销量">
            <line-echart :categoryGoodsSale="categoryGoodsSale"></line-echart>
          </hy-card>
        </el-col>
        <el-col :span="12">
          <hy-card title="分类商品数量图（饼图）">
            <bar-echart :categoryGoodsFavor="categoryGoodsFavor"></bar-echart>
          </hy-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import hyCard from '../../../../base-ui/card/index'
import goodsCountCard from './cpns/goods-count-cart.vue'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart,
  MapEchart
} from '../../../../components/page-echarts/index'
export default defineComponent({
  name: 'dashboard',
  components: {
    hyCard,
    PieEchart,
    RoseEchart,
    LineEchart,
    BarEchart,
    MapEchart,
    goodsCountCard
  },
  setup() {
    const store = useStore()
    store.dispatch('dashboardModule/getDashboardDataAction')
    const categoryGoodsCount = computed(() => {
      return store.state.dashboardModule.categoryGoodsCount.map((item) => {
        return { name: item.name, value: item.goodsCount }
      })
    })
    const addressGoodsSale = computed(() => {
      return store.state.dashboardModule.addressGoodsSale.map((item) => {
        return { name: item.address, value: item.count }
      })
    })
    const categoryGoodsSale = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const categoryGoodsSale = store.state.dashboardModule.categoryGoodsSale
      for (const item of categoryGoodsSale) {
        xLabels.push(item.name)
        values.push(item.goodsCount)
      }
      return { xLabels, values }
    })
    const categoryGoodsFavor = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const categoryGoodsFavor = store.state.dashboardModule.categoryGoodsFavor
      for (const item of categoryGoodsFavor) {
        xLabels.push(item.name)
        values.push(item.goodsFavor)
      }
      return { xLabels, values }
    })
    const categoryGoodsAmount = computed(() => {
      return store.state.dashboardModule.addressGoodsAmount
    })
    return {
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale,
      categoryGoodsAmount
    }
  }
})
</script>

<style scoped>
.conten-row {
  margin-top: 20px;
}
</style>
